import React, { Component, useContext } from 'react'

let ContextDemo = React.createContext({ "name": "jack", "age": 18 });

class Child extends Component {
	render() {
		return (
			<div>child -- {this.context.name} -- {this.context.age}</div>
		)
	}
}

Child.contextType = ContextDemo;

function ContextMode2() {
	let context = useContext(ContextDemo);
	return (
		<div>ContextMode2 -- {context.name} -- {context.age}</div>
	)
}

function UseMode3() {
	return (
		<div>
			<ContextDemo.Consumer>
				{
					value => {
						return (
							<div>UseMode3 -- {value.name} -- {value.age}</div>
						)
					}
				}
			</ContextDemo.Consumer>
		</div>
	)
}

export default class App extends Component {

	constructor(props) {
		super(props);
		this.state = {
			text: { "name": "change", "age": 20 }
		}
	}

	render() {
		return (
			<div>
				<ContextDemo.Provider value={this.state.text}>
					<Child></Child>
					<ContextMode2></ContextMode2>
					<UseMode3></UseMode3>
					<button onClick={() => { this.setState({text: { "name": "变化", "age": 30 }}) }}>change</button>
				</ContextDemo.Provider>
			</div >
		)
	}
}

// 提供的value改变，会使得所有消费该value的组件都重新渲染，优化手段：
// ① 第一种就是利用 memo，pureComponent 对子组件 props 进行浅比较处理。
// const Son = React.memo(()=> <ConsumerDemo />)  
// ② 第二种就是 React 本身对 React element 对象的缓存。React 每次执行 render 都会调用 createElement 形成新的 React element 对象，
// 如果把 React element 缓存下来，下一次调和更新时候，就会跳过该 React element 对应 fiber 的更新。
// <ThemeProvider value={ contextValue } >
//     { React.useMemo(()=>  <Son /> ,[]) }
// </ThemeProvider>